<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- meta:元，用于进行网页初始设置。charset:字符编码，UTF-8表示支持汉字，避免因汉字而出现乱码 -->
    <meta charset="UTF-8" />
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 关键字设置，用于做SEO -->
    <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <!-- 网站描述，用于做SEO -->
    <meta name="description" content="品优购-专业的综合网上购物商城" />
    <!-- 如果用IE打开该网站，用最新版本进行渲染；如果用Chrome打开，将Chrome Frame进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 主要针对国内双核浏览器，优先用webkit渲染（快） -->
    <meta name="renderer" content="webkit" />
    <!-- 注意：在项目开发中，所有的html文件都必须进行如上设置 -->
    <!-- 说明：网站图标通常为.ico/.png/. -->
    <link
      rel="shortcut icon"
      href="./images/favicon.ico"
      type="images/x-icon"
    />
    <title>
      品优购-综合网购首选-正品低价、品优购-专业的综合网上购物商城保障、配送及时、轻松购物！
    </title>
    <!-- 样式重置 -->
    <link rel="stylesheet" href="./style/reset.css" />
    <!-- 图标 -->
    <link rel="stylesheet" href="./style/iconfont.css" />
    <!-- 通用样式 -->
    <link rel="stylesheet" href="./style/common.css" />
    <!-- 引入轮播图css插件 -->
    <link rel="stylesheet" href="./style/swiper.css" />
    <link rel="stylesheet" href="./style/header.css" />
    <link rel="stylesheet" href="./style/footer.css" />
    <link rel="stylesheet" href="./style/index.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <!-- （1）快速导航栏 -->
      <div class="shortcut">
        <div class="shortcut-content">
          <div class="welcome">
            品优购欢迎您！请
            <a href="./pages/login.html">登录</a>
            <a href="./pages/register.html">免费注册</a>
          </div>
          <ul class="order-center">
            <li><a href="./pages/order.html">我的订单</a><span>|</span></li>
            <li><a href="./pages/center.html">个人中心</a></li>
          </ul>
        </div>
      </div>
      <!-- （2）Logo区 -->
      <div class="logo-area">
        <h1>
          <!-- （1）单双标签；(2）块级（独占一行，识别宽高）、行级（不独占一行，不识别宽高，
            但可以通过但可以通过display:block/inling-block将其转换为块级或行内块级，
            以识别宽高)、行内块级（不独占一行，但识别宽高
            如img\input\button\select\textarea等） -->
          <a href="index.html">
            <img src="./images/logo.png" alt="" />
          </a>
          <!-- <br/>换行符
            <hr/> 分割线-->
        </h1>
        <div class="search">
          <!-- 单行文本框 -->
          <input type="text" placeholder="请输入内容...." />
          <!-- 普通命令按钮 -->
          <input type="button" value="搜索" />
        </div>
        <div class="cart">
          <i class=""
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-bag-heart"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5v-.5Zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0ZM14 14V5H2v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1ZM8 7.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"
              /></svg
          ></i>
          <span><a href="./pages/cart.html">我的购物车</a></span>
          <!-- 徽章 -->
          <span class="badge">0</span>
          <!-- <i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 -3 16 16">
            <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
          </svg></i> -->
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </div>
      <div class="clear"></div>
      <!-- （3）导航栏 -->
      <nav>
        <div class="nav center">
          <div class="category fl">
            <div class="category-title">全部商品分类</div>
            <ul class="category-nav-list">
              <!-- 手机 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">手机</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="./pages/category.html"
                      ><img src="./images/m01.png" alt="商品" />
                      <span>HUAWEI P系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/m02.png" alt="商品" />
                      <span>HUAWEI Mate系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/m03.png" alt="商品" />
                      <span>HUAWEI Nova系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 笔记本 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">笔记本</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="#"
                      ><img src="./images/l01.png" alt="商品" />
                      <span>华为MateBook X系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/l02.png" alt="商品" />
                      <span>华为MateBook系列 </span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/l03.png" alt="商品" />
                      <span>华为MateBook D系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 平板 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">平板</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="#"
                      ><img src="./images/t01.png" alt="商品" />
                      <span>华为MatePad 系列</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/t02.png" alt="商品" />
                      <span>华为畅想系列</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 智能穿戴 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">智能穿戴</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="#"
                      ><img src="./images/w01.png" alt="商品" />
                      <span>智能手表</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/w02.png" alt="商品" />
                      <span>智能手环</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 智能家居 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">智能家居</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="#"
                      ><img src="./images/f01.png" alt="商品" />
                      <span>智能路由</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/f02.png" alt="商品" />
                      <span>智能音箱 </span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 电视 -->
              <li class="category-nav-item">
                <div class="category-name">
                  <a href="#" class="category-name-0">电视</a>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="category-subnav-list">
                  <li>
                    <a href="#"
                      ><img src="./images/d01.png" alt="商品" />
                      <span>华为智慧屏</span>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      ><img src="./images/d02.png" alt="商品" />
                      <span>荣耀智慧屏</span>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <ul class="main-nav fl">
            <li><a href="./pages/category.html">手机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">智能穿戴</a></li>
            <li><a href="#">智能家居</a></li>
            <li><a href="#">电视</a></li>
          </ul>
        </div>
      </nav>
      <!-- （4）轮播图 -->
      <div class="carousel center">
        <!-- 轮播图：循环播放图片。
        一般用于产品宣传、展示或其他内容的宣传等。
        在有限的空间中存放多张图片，再一次播放。
        轮播图通常右=由组图、控制器、分页器组成 -->
        <div class="swiper">
          <div class="swiper-wrapper"></div>
          <!-- 分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          <!-- 滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main class="center">
      <!-- 精品推荐 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">精品推荐</h3>
        </div>
        <ul class="goods-list"></ul>
      </div>
      <!-- 手机 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">手机</h3>
          <ul class="category-small fl">
            <li><a href="#">HUAWEI P系列</a></li>
            <li><a href="#">HUAWEI Mate系列</a></li>
            <li><a href="#">HUAWEI Nova系列</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list">
          <li class="goods-item">
            <a href="#">
              <img src="./images/jingpin/1.png" alt="商品" />
              <h3>HUAWEI Mate 40 Pro</h3>
              <span class="price">￥6999.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/jingpin/2.png" alt="商品" />
              <h3>HUAWEI P40 Pro</h3>
              <span class="price">￥5988.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/jingpin/3.png" alt="商品" />
              <h3>HUAWEI nova 7</h3>
              <span class="price">￥2999.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/phone/m-02-small02.png" alt="商品" />
              <h3>HUAWEI P40 Pro+</h3>
              <span class="price">￥6999.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 老师写的 -->
      <!-- 笔记本 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">笔记本</h3>
          <ul class="category-small fl">
            <li><a href="#">华为MateBook X系列</a></li>
            <li><a href="#">华为MateBook系列</a></li>
            <li><a href="#">华为MateBook D系列</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list1">
          <li class="goods-item">
            <a href="#">
              <img src="./images/laptop/1.png" alt="商品" />
              <h3>HUAWEI MateBook X 2020款</h3>
              <span class="price">￥7988.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/laptop/2.png" alt="商品" />
              <h3>HUAWEI MateBook 14 2020</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/laptop/3.png" alt="商品" />
              <h3>HUAWEI MateBook D 14</h3>
              <span class="price">￥6199.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/laptop/4.png" alt="商品" />
              <h3>HUAWEI MateBook D 15 2021</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 平板 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">平板</h3>
          <ul class="category-small fl">
            <li><a href="#">华为MatePad 系列</a></li>
            <li><a href="#">华为畅想系列</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list1">
          <li class="goods-item">
            <a href="#">
              <img src="./images/pinban/1.png" alt="商品" />
              <h3>HUAWEI MatePad 5G 10.4英寸</h3>
              <span class="price">￥3199.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/laptop/2.png" alt="商品" />
              <h3>华为畅享平板 2 10.1英寸</h3>
              <span class="price">￥1599.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/3.png" alt="商品" />
              <h3>HUAWEI MateBook D 14</h3>
              <span class="price">￥6199.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/4.png" alt="商品" />
              <h3>HUAWEI MateBook D 15 2021</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 智能穿戴 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">智能穿戴</h3>
          <ul class="category-small fl">
            <li><a href="#">智能手表</a></li>
            <li><a href="#">智能手环</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list1">
          <li class="goods-item">
            <a href="#">
              <img src="./images/chuandai/1.png" alt="商品" />
              <h3>HUAWEI WATCH GT 2</h3>
              <span class="price">￥1688.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/chuandai/2.png" alt="商品" />
              <h3>华为手环4</h3>
              <span class="price">￥199.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/3.png" alt="商品" />
              <h3>HUAWEI MateBook D 14</h3>
              <span class="price">￥6199.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/4.png" alt="商品" />
              <h3>HUAWEI MateBook D 15 2021</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 智能家具 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">智能家具</h3>
          <ul class="category-small fl">
            <li><a href="#">智能路由</a></li>
            <li><a href="#">智能音箱</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list1">
          <li class="goods-item">
            <a href="#">
              <img src="./images/jiaju/1.png" alt="商品" />
              <h3>华为路由AX3</h3>
              <span class="price">￥249.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/jiaju/2.png" alt="商品" />
              <h3>HUAWEI Sound 智能音箱</h3>
              <span class="price">￥999.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/3.png" alt="商品" />
              <h3>HUAWEI MateBook D 14</h3>
              <span class="price">￥6199.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/4.png" alt="商品" />
              <h3>HUAWEI MateBook D 15 2021</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 电视 -->
      <div class="category">
        <div class="category-title-name">
          <h3 class="fl">电视</h3>
          <ul class="category-small fl">
            <li><a href="#">华为智慧屏</a></li>
            <li><a href="#">荣耀智慧屏</a></li>
          </ul>
          <div class="more fr">
            <a href="#">查看更多</a>
          </div>
        </div>
        <ul class="goods-list1">
          <li class="goods-item">
            <a href="#">
              <img src="./images/dianshi/1.png" alt="商品" />
              <h3>华为智慧屏 V65i</h3>
              <span class="price">￥7499.00</span>
            </a>
          </li>
          <li class="goods-item">
            <a href="#">
              <img src="./images/dianshi/2.png" alt="商品" />
              <h3>荣耀智慧屏X1系列</h3>
              <span class="price">￥2699.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/3.png" alt="商品" />
              <h3>HUAWEI MateBook D 14</h3>
              <span class="price">￥6199.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/laptop/4.png" alt="商品" />
              <h3>HUAWEI MateBook D 15 2021</h3>
              <span class="price">￥6399.00</span>
            </a>
          </li>
          <li class="goods-item" id="hidden-item" style="visibility: hidden">
            <a href="#">
              <img src="./images/phone/m-02-small03.png" alt="商品" />
              <h3>HUAWEI P40</h3>
              <span class="price">￥4488.00</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- 自己写的 -->
      <!-- 笔记本 -->
      <!-- <div class="category">
          <div class="category-title-name">
            <h3 class="fl">笔记本</h3>
            <ul class="category-small fl">
              <li><a href="#">华为MateBook X系列</a></li>
              <li><a href="#">华为MateBook系列</a></li>
              <li><a href="#">华为MateBook D系列</a></li>
            </ul>
            <div class="more fr">
              <a href="#">查看更多</a>
            </div>
          </div>
          <ul class="goods-list">
            <li class="goods-item">
              <a href="#">
                <img src="./images/laptop/1.png" alt="商品">
                <h3>HUAWEI MateBook X 2020款</h3>
                <span class="price">￥7988.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/laptop/2.png" alt="商品">
                <h3>HUAWEI MateBook 14 2020</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/laptop/3.png" alt="商品">
                <h3>HUAWEI MateBook D 14</h3>
                <span class="price">￥6199.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/laptop/4.png" alt="商品">
                <h3>HUAWEI MateBook D 15 2021</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/phone/m-02-small03.png" alt="商品">
                <h3>HUAWEI P40</h3>
                <span class="price">￥4488.00</span>
              </a>
            </li>
          </ul>
        </div> -->
      <!-- 平板 -->
      <!-- <div class="category">
          <div class="category-title-name">
            <h3 class="fl">平板</h3>
            <ul class="category-small fl">
              <li><a href="#">华为MatePad 系列</a></li>
              <li><a href="#">华为畅想系列</a></li>
            </ul>
            <div class="more fr">
              <a href="#">查看更多</a>
            </div>
          </div>
          <ul class="goods-list">
            <li class="goods-item">
              <a href="#">
                <img src="./images/pinban/1.png" alt="商品">
                <h3>HUAWEI MatePad 5G 10.4英寸</h3>
                <span class="price">￥3199.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/laptop/2.png" alt="商品">
                <h3>华为畅享平板 2 10.1英寸</h3>
                <span class="price">￥1599.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/3.png" alt="商品">
                <h3>HUAWEI MateBook D 14</h3>
                <span class="price">￥6199.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/4.png" alt="商品">
                <h3>HUAWEI MateBook D 15 2021</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/phone/m-02-small03.png" alt="商品">
                <h3>HUAWEI P40</h3>
                <span class="price">￥4488.00</span>
              </a>
            </li>
          </ul>
        </div> -->
      <!-- 智能穿戴 -->
      <!-- <div class="category">
          <div class="category-title-name">
            <h3 class="fl">智能穿戴</h3>
            <ul class="category-small fl">
              <li><a href="#">智能手表</a></li>
              <li><a href="#">智能手环</a></li>
            </ul>
            <div class="more fr">
              <a href="#">查看更多</a>
            </div>
          </div>
          <ul class="goods-list">
            <li class="goods-item">
              <a href="#">
                <img src="./images/chuandai/1.png" alt="商品">
                <h3>HUAWEI WATCH GT 2</h3>
                <span class="price">￥1688.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/chuandai/2.png" alt="商品">
                <h3>华为手环4</h3>
                <span class="price">￥199.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/3.png" alt="商品">
                <h3>HUAWEI MateBook D 14</h3>
                <span class="price">￥6199.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/4.png" alt="商品">
                <h3>HUAWEI MateBook D 15 2021</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/phone/m-02-small03.png" alt="商品">
                <h3>HUAWEI P40</h3>
                <span class="price">￥4488.00</span>
              </a>
            </li>
          </ul>
        </div> -->
      <!-- 智能家具 -->
      <!-- <div class="category">
          <div class="category-title-name">
            <h3 class="fl">智能家具</h3>
            <ul class="category-small fl">
              <li><a href="#">智能路由</a></li>
              <li><a href="#">智能音箱</a></li>
            </ul>
            <div class="more fr">
              <a href="#">查看更多</a>
            </div>
          </div>
          <ul class="goods-list">
            <li class="goods-item">
              <a href="#">
                <img src="./images/jiaju/1.png" alt="商品">
                <h3>华为路由AX3</h3>
                <span class="price">￥249.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/jiaju/2.png" alt="商品">
                <h3>HUAWEI Sound 智能音箱</h3>
                <span class="price">￥999.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/3.png" alt="商品">
                <h3>HUAWEI MateBook D 14</h3>
                <span class="price">￥6199.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/4.png" alt="商品">
                <h3>HUAWEI MateBook D 15 2021</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/phone/m-02-small03.png" alt="商品">
                <h3>HUAWEI P40</h3>
                <span class="price">￥4488.00</span>
              </a>
            </li>
          </ul>
        </div> -->
      <!-- 电视 -->
      <!-- <div class="category">
          <div class="category-title-name">
            <h3 class="fl">电视</h3>
            <ul class="category-small fl">
              <li><a href="#">华为智慧屏</a></li>
              <li><a href="#">荣耀智慧屏</a></li>
            </ul>
            <div class="more fr">
              <a href="#">查看更多</a>
            </div>
          </div>
          <ul class="goods-list">
            <li class="goods-item">
              <a href="#">
                <img src="./images/dianshi/1.png" alt="商品">
                <h3>华为智慧屏 V65i</h3>
                <span class="price">￥7499.00</span>
              </a>
            </li>
            <li class="goods-item">
              <a href="#">
                <img src="./images/dianshi/2.png" alt="商品">
                <h3>荣耀智慧屏X1系列</h3>
                <span class="price">￥2699.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/3.png" alt="商品">
                <h3>HUAWEI MateBook D 14</h3>
                <span class="price">￥6199.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/laptop/4.png" alt="商品">
                <h3>HUAWEI MateBook D 15 2021</h3>
                <span class="price">￥6399.00</span>
              </a>
            </li>
            <li class="goods-item" id="hidden-item" style="visibility: hidden;">
              <a href="#">
                <img src="./images/phone/m-02-small03.png" alt="商品">
                <h3>HUAWEI P40</h3>
                <span class="price">￥4488.00</span>
              </a>
            </li>
          </ul>
        </div> -->
    </main>
    <!-- 尾部 -->
    <footer>
      <div class="footer center">
        <!-- 提供服务 -->
        <ul class="service">
          <li>
            <span class="fl"></span>
            <div class="service-content fl">
              <h3>正品保障</h3>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <span class="fl"></span>
            <div class="service-content fl">
              <h3>快速送达</h3>
              <p>极致物流，快速送达</p>
            </div>
          </li>
          <li>
            <span class="fl"></span>
            <div class="service-content fl">
              <h3>品质好物</h3>
              <p>品质好物，优质服务</p>
            </div>
          </li>
          <li>
            <span class="fl"></span>
            <div class="service-content fl">
              <h3>品质保证</h3>
              <p>百强企业，品质保证</p>
            </div>
          </li>
          <li>
            <span class="fl"></span>
            <div class="service-content fl">
              <h3>维修服务</h3>
              <p>维修服务，预约维修</p>
            </div>
          </li>
        </ul>
        <!-- 购物指南 -->
        <div class="help">
          <!-- 列表分为：有序、无序、自定义
          有序：用ol li
          无序：用ul li
          自定义：用dl dt（标题） dd（内容）
        一般用于名词解释或分来说明 -->
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">客户服务</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">客户服务</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">客户服务</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">客户服务</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">配送方式</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">客户服务</a></dd>
          </dl>
          <dl>
            <dt>手机客户端</dt>
            <dd href="#">
              <img src="./images/erweima.png" alt="品优古" />
            </dd>
            <dd href="#">品优购客户端</dd>
          </dl>
        </div>
        <!-- 连接和公司地址 -->
        <div class="link-addr">
          <ul class="link">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">商家入驻</a></li>
            <li><a href="#">营销中心</a></li>
            <li><a href="#">手机品优购</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">销售联盟</a></li>
            <li><a href="#">品优购社区</a></li>
            <li><a href="#">品优购公益</a></li>
          </ul>
          <p class="addr-coyright"></p>
          地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
          电话：400-618-4000 传真：010-82935100 邮箱: abc.cn<br />渝ICP备08001421号
        </div>
      </div>
    </footer>
    <!-- 侧边栏 -->
    <aside>
      <ul>
        <!-- javascript:void(0)：屏蔽掉a标签的默认行为（跳转） -->

        <li><a href="javascript:void(0)">手机</a></li>
        <li><a href="javascript:void(0)">笔记本</a></li>
        <li><a href="javascript:void(0)">平板</a></li>
        <li><a href="javascript:void(0)">智能穿戴</a></li>
        <li><a href="javascript:void(0)">智能家具</a></li>
        <li><a href="javascript:void(0)">电视</a></li>
      </ul>
      <div class="to-top">
        <a href="javascript:void(0);">回到顶部</a>
      </div>
    </aside>
  </body>

  <!-- 创建模板 -->
  <!-- 2.banner模板 -->
  <script type="text/html" id="banner">
    {{ each banner }}
    <div class="swiper-slide">
      <a href="#">
        <img src={{"./images/banner/"+$value}} alt="swiper" />
      </a>
    </div>
    {{ /each }}
  </script>
  <!-- 精品推荐 -->
  <script type="text/html" id="bs">
    {{ each bsGoods }}
    <li class="goods-item">
      <a href="./pages/details.html">
        <img src={{"./images/phone/"+$value.gpic}} alt="商品" />
        <h3>{{ $value.gname }}</h3>
        <span class="price">￥{{$value.gprice}}.00</span>
      </a>
    </li>
    {{ /each }}
  </script>
  <!-- js文件或代码尽量放在最后,而不是放在标签中
  是为了避免js阻塞 -->
  <!-- cdn引入jquery -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/
    libs/jquery/3.7.1/jquery.js"></script> -->
    <!-- 本地引入jquety -->
    <script src="./javascript/jquery.js"></script>
    <!-- 1.引入模板引擎 -->
    <script src="./javascript/template.js"></script>
    <script src="./javascript/swiper.js"></script>
  <script src="./javascript/index.js"></script>
</html>
